import React, { Component } from 'react'
import axios from 'axios'
import {Input} from "antd"
import {throttle,debounce} from "lodash"
export class Search extends Component {
    state={
        list:[],
        data:[],
        value:""
    }
    componentDidMount(){
        axios.get("/list").then(res=>{
            this.setState({list:res.data.list[0].children,data:res.data.list[0].children})
        })
    }
    InputValue(e){
        console.log(e);
        let data = this.state.data
        let newData = data.filter(item=>{
            return item.title.includes(e.target.value) || (item.price + "").includes(e.target.value) || item.id.toString().includes(e.target.value)
        })
        this.setState({
            value:e.target.value,
            list:newData})
    }
    render() {
        let {list,value} = this.state
        return (
            <div>
                Search
                {/* 第一个参数是你需要防抖的函数，第二个是你设定的时间 */}
                <Input value={value}  bordered onChange ={debounce(this.InputValue.bind(this),2000)}/>
                {
                    list&&list.map((item,index)=>{
                        return <div key={index}>
                              <img src={item.img} alt=""  />
                                <p>{item.id}</p>
                                <p>{item.title}</p>
                                <p>price:{item.price}</p>
                                <p>count:{item.count}</p>
                        </div>
                    })
                }
            </div>
        )
    }
}

export default Search
